<template>
    <div>
        <h1>角色权限对应管理页面</h1>
        <el-select v-model="rolePermission.roleId" clearable placeholder="请选择角色">
            <el-option
                    v-for="item in roleOptions"
                    :key="item.id"
                    :label="item.roleName"
                    :value="item.id">
            </el-option>
        </el-select>
        <el-select v-model="rolePermission.permissionId" clearable placeholder="请选择权限">
            <el-option
                    v-for="item in permissions"
                    :key="item.id"
                    :label="item.permissionName"
                    :value="item.id">
            </el-option>
        </el-select>
        <el-button type="primary" icon="el-icon-search" size="small" @click="handleInitDatas">查询</el-button>
        <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column
                    prop="id"
                    label="角色ID"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="roleName"
                    label="角色名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="permissions"
                    label="角色拥有权限">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                background
                layout="prev, pager, next"
                :current-page="pageNum"
                :page-size="pageInfo.pageSize"
                :total="pageInfo.total"
                @current-change="handleInitDatas"
        >
        </el-pagination>
        <el-dialog title="修改角色所拥有权限" :visible.sync="dialogFormVisible">
            <el-form :model="form" ref="form">
                <el-form-item label="角色ID" :label-width="formLabelWidth" prop="id">
                    <el-input placeholder="form.id" v-model="form.id" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="角色名称" :label-width="formLabelWidth" prop="roleName">
                    <el-input placeholder="form.name" v-model="form.name" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="拥有权限" :label-width="formLabelWidth" prop="permissionIds">
                    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                    <div style="margin: 15px 0;"></div>
                    <el-checkbox-group v-model="checkedPermissions" @change="handleCheckedPermissionsChange">
                        <el-checkbox v-for="permission in permissions" :label="permission.id" :key="permission.id">{{permission.permissionName}}</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="updatePermissions">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "ManageRolePermissionView",
        data(){
            return{
                tableData: [],
                permissions: [],
                rolePermission: {},
                pageNum:1,
                pageInfo: [],
                roleOptions: [],
                dialogFormVisible: false,
                formLabelWidth: '100px',
                form: {},
                checkAll: false,
                checkedPermissions: [],
                isIndeterminate: true,
            }
        },
        created() {
            this.handleInitDatas();
            this.handleInitRolesAndPermissions();
        },
        methods:{
            handleInitDatas(pageNum) {
                if(typeof pageNum == "number"){
                    this.pageNum = pageNum;
                }
                else{
                    this.pageNum=1;
                }
                this.loading = true;
                this.$axios.post("http://localhost:8080/manage/rolePermission/list",this.rolePermission,{params:{pageNum:this.pageNum}}).then(response => {
                    this.pageInfo = response.data.data;
                    const tableData = response.data.data.list;
                    tableData.map(ob=>{
                        ob['permissions'] = [];
                        ob.permissionIds.map(o=>{
                            this.permissions.map(permission=>{
                                if (permission.id == o){
                                    ob['permissions']+=permission.permissionName;
                                    ob['permissions']+= " ";
                                }
                            })
                        })
                    })
                    this.tableData = tableData;
                });
            },
            handleInitRolesAndPermissions() {
                this.$axios.get("http://localhost:8080/manage/permission/list").then(response => {
                    this.permissions = response.data.data;
                });
                this.$axios.get("http://localhost:8080/manage/role/list").then(response => {
                    this.roleOptions = response.data.data;
                });
            },
            handleClick(row){
                this.form.id = row.id;
                this.form.name = row.roleName;
                this.$axios.get("http://localhost:8080/manage/rolePermission/listByRoleId?id="+row.id).then(response => {
                    const checkedPermissions = [];
                    response.data.data.map(ob=>{
                        checkedPermissions.push(ob.id);
                    })
                    this.checkedPermissions = checkedPermissions;
                });
                this.dialogFormVisible = true;
            },
            handleCheckAllChange(val) {
                //this.checkedPermissions = val ? this.permissions : [];
                if(val){
                    for(var i=0;i<this.permissions.length;i++){
                        this.checkedPermissions.push(this.permissions[i].id);
                    }
                }
                else {
                    this.checkedPermissions = [];
                }
                this.isIndeterminate = false;
            },
            handleCheckedPermissionsChange(value) {
                let checkedCount = value.length;
                this.checkAll = checkedCount === this.permissions.length;
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.permissions.length;
            },
            updatePermissions(){
                this.$axios.post("http://localhost:8080/manage/rolePermission/update",this.checkedPermissions,{params:{id: this.form.id}}).then(response => {
                    this.dialogFormVisible = false;
                    this.handleInitDatas();
                });
            },
        }
    }
</script>

<style scoped>

</style>